function Smart() {

    // public
    this.title = "睿智";
    this.divId = "smart";
    this.hide = function() {
        getElement().style.display="none";
    };
    this.unhide = function() {
        getElement().style.display="block";
        init();
    };

    // private
    var self = this;
    var isPeekMode = true;
    var peekID;
    var moveStartTime;

    var mask;
    var ctx;
    var point;
    var maskImage = new Image();
    maskImage.src = "smart/sky.jpg";

    function getElement() {
        return document.getElementById(self.divId);
    }

    // Interact Begin
    function interactBegin() {
        moveStartTime = Date.now();
        if (isPeekMode && !peekID) {    // Add the peekID judge for prevent the mutilply touch point
            drawThePeekMode();
        }
    }

    // Interacting
    function interacting() {
        if (!isPeekMode) {
            drawOnThePoint(window.innerWidth * 0.05);
        }
    }

    // Interact End
    function interactEnd() {
        if (peekID > 0) {
            window.clearInterval(peekID);
            peekID = 0;
        }
        if (isPeekMode) {
            // Need to recovert the mask
            drawImage();
        }
    }


    // ---------- Mouse event ----------
    function handleMouseEnter(event) {
        event.preventDefault();
        point = { x: event.clientX - mask.offsetLeft,
                y: event.clientY - mask.offsetTop};
        interactBegin();
    }

    function handleMouseMove(event) {
        event.preventDefault();
        point = { x: event.clientX - mask.offsetLeft,
                y: event.clientY - mask.offsetTop};
        interacting();
    }

    function handleMouseOut(event) {
        event.preventDefault();
        interactEnd();
    }
    // ---------- Mouse event ----------



    // ---------- Touch event ----------
    function handleTouchStart(event) {
        event.preventDefault();
        point = { x: event.changedTouches[0].clientX - mask.offsetLeft,
                y: event.changedTouches[0].clientY - mask.offsetTop};
        interactBegin();
    }

    function handleTouchMove(event) {
        event.preventDefault();
        point = { x: event.changedTouches[0].clientX - mask.offsetLeft,
                y: event.changedTouches[0].clientY - mask.offsetTop};
        if (!isPeekMode) {
            // Peek is already draw in the interval
            drawOnThePoint(point);
        }
        interacting();
    }

    function handleTouchEnd(event) {
        event.preventDefault();
        interactEnd();
    }
    // ---------- Touch event ----------

    function drawThePeekMode() {
        peekID = window.setInterval(function() {

            // count the radio of the circle start
            var duratioin = 500;    // Animation time(ms)
            var rmin = window.innerWidth * 0.05;   // min radio
            var rmax = window.innerWidth * 0.2;   // min radio

            var now = Date.now();
            var interval = now - moveStartTime;
            var r;
            if (interval >= duratioin) {
                r = rmax;
            } else {
                r = rmin + (rmax-rmin) * interval / duratioin;
            }
            // count the radio of the circle end
            drawOnThePoint(r);
        }, 20);
    }

    function drawOnThePoint(r) {
        // this.clearTheMask();
        ctx.beginPath()
        if (isPeekMode) {
            drawImage();
        }
        drawTheCircle(point.x, point.y, r);
        ctx.closePath();

        // this.shouldUnmask();
    }

    function clearTheMask() {
        // this.ctx.clearRect(0, 0, this.mask.width, this.mask.height);
    }

    function drawTheCircle(x, y, r) {
        ctx.globalCompositeOperation="destination-out";
        ctx.arc(x, y, r, 0, Math.PI * 2);
        ctx.fill();
    }

    function drawImage() {
        // this.ctx.globalCompositeOperation="source-over";
        // this.ctx.drawImage(this.maskImage, 0, 0, this.mask.width, this.mask.height);

        // for test
        drawBlackRect();
    }

    function drawBlackRect() {
        ctx.globalCompositeOperation="source-over";
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, mask.width, mask.height);
    }

    function shouldUnmask() {
        var data= ctx.getImageData(0, 0, mask.width, mask.height).data;
        for(var i=0,j=0;i< data.length;i++){
            if(data[i]){
                j++;
            }
        }
        if(j<=w*h*0.1){
            alert('ok');
        }
    }

    function init() {
        mask = document.getElementById("mask");
        mask.width = window.innerWidth;
        mask.height = window.innerHeight;
        ctx = mask.getContext("2d");
        drawImage();

        mask.addEventListener("mouseenter", handleMouseEnter, false);
        mask.addEventListener("mousemove", handleMouseMove, false);
        mask.addEventListener("mouseout", handleMouseOut, false);

        mask.addEventListener("touchstart", handleTouchStart, false);
        mask.addEventListener("touchmove", handleTouchMove, false);
        mask.addEventListener("touchend", handleTouchEnd, false);


    }
}